<template>
    <div class="container">
        <system-nav :name="isEdit ? '编辑党员' : '添加党员'" :showBack="true"></system-nav>
        <div class="inner">
            <div class="system-form">
                <Form ref="form" :model="form" :rules="ruleValidate" :label-width="120" :hide-required-mark="true">
                    <FormItem prop="empName" label="姓名">
                        <Input v-model="form.empName" type="text" class="common-input" clearable placeholder="请输入姓名" />
                    </FormItem>
                    <FormItem prop="deptId" label="所属党组织">
                        <committee-tree class="common-input" v-model="form.deptId" :disabledTree="disabledTree" @input="onChangeDeptId" />
                    </FormItem>
                    <FormItem prop="sex" label="性别">
                        <RadioGroup v-model="form.sex">
                            <Radio :label="1">男</Radio>
                            <Radio :label="2">女</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem prop="age" label="年龄">
                        <Input v-model="form.age" type="text" class="common-input" clearable placeholder="请输入年龄" />
                    </FormItem>
                    <FormItem prop="mobile" label="手机号">
                        <Input v-model="form.mobile" type="text" class="common-input" clearable placeholder="请输入手机号" />
                    </FormItem>
                    <FormItem prop="email" label="邮箱">
                        <Input v-model="form.email" type="text" class="common-input" clearable placeholder="请输入邮箱" />
                    </FormItem>
                    <FormItem prop="idCard" label="身份证号">
                        <Input v-model="form.idCard" type="text" class="common-input" clearable placeholder="请输入身份证号" />
                    </FormItem>
                    <FormItem prop="workTime" label="工作时间">
                        <DatePicker v-model="form.workTime" type="date" :options="pickerOptions" placeholder="请选择工作时间"></DatePicker>
                    </FormItem>
                    <FormItem prop="partyTime" label="入党时间">
                        <DatePicker v-model="form.partyTime" type="date" :options="pickerOptions" placeholder="请选择入党时间"></DatePicker>
                    </FormItem>
                    <FormItem prop="nativePlace" label="籍贯">
                        <div class="wrapper">
                            <al-selector v-model="form.nativePlace" level="2" data-type="name" />
                        </div>
                    </FormItem>
                    <FormItem prop="registeredPlace" label="户口所在地">
                        <div class="wrapper">
                            <al-selector v-model="form.registeredPlace" data-type="name" />
                        </div>
                    </FormItem>
                    <FormItem prop="address" label="家庭住址">
                        <Input v-model="form.address" type="text" class="common-input" clearable placeholder="请输入家庭住址" />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" class="margin-right-25" @click="handleSubmit('form')">提交</Button>
                        <Button type="primary" @click="goBack" ghost>返回</Button>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import SystemNav from '@/components/SystemNav'
import CommitteeTree from '@/components/CommitteeTree'
import mixin from '@/mixins'
import { addMemberRest, editMemberRest, getMemberRest } from '@/common/apis/system'
import validator from '@/common/utils/validator'

export default {
    name: 'memberAddEdit',
    mixins: [mixin],
    components: {
        SystemNav,
        CommitteeTree
    },
    data() {
        return {
            isEdit: false,
            deptList: [],
            disabledTree: false,
            form: {
                empName: '',
                sex: 1,
                age: null,
                mobile: '',
                email: '',
                idCard: '',
                workTime: '',
                partyTime: '',
                nativePlace: [],
                registeredPlace: [],
                address: '',
                deptId: null,
                agreementCheck: true
            },
            ruleValidate: {
                empName: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                age: [
                    { required: true, validator: validator.validateAge, trigger: 'blur' }
                ],
                mobile: [
                    { required: true, validator: validator.validateMobile, trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱', trigger: 'blur' }
                ],
                idCard: [
                    { required: true, validator: validator.validateIdCard, trigger: 'blur' }
                ],
                workTime: [
                    { required: true, type: 'date', message: '工作时间不能为空', trigger: 'change' }
                ],
                partyTime: [
                    { required: true, type: 'date', message: '入党时间不能为空', trigger: 'change' }
                ],
                nativePlace: [
                    { required: true, type: 'array', min: 3, message: '请选择籍贯', trigger: 'change' }
                ],
                registeredPlace: [
                    { required: true, type: 'array', min: 4, message: '请选择户口所在地', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '家庭住址不能为空', trigger: 'blur' }
                ],
                deptId: [
                    { required: true, validator: validator.validateDeptId, trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['userInfo'])
    },
    mounted() {
        this.id = this.$route.params.id
        this.isEdit = this.id !== undefined
        this.level = Number(this.userInfo.department.level)
        this.disabledTree = this.level === 3
        this.form.deptId = this.level === 3 ? Number(this.userInfo.department.id) : null
        this.initData()
    },
    methods: {
        initData() {
            if (this.isEdit) {
                this.getMember()
            }
        },
        getMember() {
            getMemberRest(this.id).then(result => {
                this.memberInfo = result.data.content
                this.form = {
                    ...this.memberInfo,
                    deptId: this.memberInfo.deptId,
                    workTime: moment(this.memberInfo.workTime).format('YYYY-MM-DD'),
                    partyTime: moment(this.memberInfo.partyTime).format('YYYY-MM-DD'),
                    nativePlace: this.memberInfo.nativePlace ? this.memberInfo.nativePlace.split(' ') : [],
                    registeredPlace: this.memberInfo.registeredPlace ? this.memberInfo.registeredPlace.split(' ') : []
                }
            })
        },
        onChangeDeptId(val) {
            this.$nextTick(() => {
                this.form.deptId = val
                this.$refs.form.validateField('deptId')
            })
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    const { deptId, partyTime, workTime, nativePlace, registeredPlace } = this.form
                    let params = {
                        id: 0,
                        ...this.form,
                        deptId: deptId,
                        partyTime: moment(partyTime).valueOf(),
                        workTime: moment(workTime).valueOf(),
                        nativePlace: nativePlace.join(' '),
                        registeredPlace: registeredPlace.join(' ')
                    }
                    if (this.isEdit) {
                        params.id = this.id
                        editMemberRest(params).then(result => {
                            this.goBack()
                            if (result.data.code === 200) {
                                this.$Message.success({
                                    background: true,
                                    content: '编辑成功'
                                })
                            } else {
                                this.$Message.error({
                                    background: true,
                                    content: '编辑失败'
                                })
                            }
                        })
                    } else {
                        addMemberRest(params).then(result => {
                            this.reset()
                            this.goBack()
                            if (result.data.code === 200) {
                                this.$Message.success({
                                    background: true,
                                    content: '添加成功'
                                })
                            } else {
                                this.$Message.error({
                                    background: true,
                                    content: '添加失败'
                                })
                            }
                        })
                    }
                }
            })
        },
        reset() {
            this.$refs.form.resetFields()
        }
    }
}
</script>
